<template>
  <a-modal
    title='角色授权'
    :width='800'
    :visible='visible'
    :confirmLoading='loading'
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-transfer
      :data-source='mockData'
      :target-keys='targetKeys'
      show-search
      :filter-option='(inputValue, item) => item.title.indexOf(inputValue) !== -1'
      :show-select-all='false'
      @change='onChange'
    >
      <template
        slot='children'
        slot-scope='{
          props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
          on: { itemSelectAll, itemSelect },
        }'
      >
        <a-table
          :row-selection='
            getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
          '
          :columns="direction === 'left' ? leftColumns : rightColumns"
          :data-source='filteredItems'
          size='small'
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
          :custom-row='
            ({ key, disabled: itemDisabled }) => ({
              on: {
                click: () => {
                  if (itemDisabled || listDisabled) return;
                  itemSelect(key, !selectedKeys.includes(key));
                },
              },
            })
          '
        />
      </template>
    </a-transfer>
  </a-modal>
</template>

<script>
const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    username: `username${i + 1}`,
    name: `张三${i + 1}`,
    disabled: i % 4 === 0,
  });
}
const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
const leftTableColumns = [
  {
    dataIndex: 'username',
    title: '账号'
  },
  {
    dataIndex: 'name',
    title: '姓名'
  }
]
const rightTableColumns = [
  {
    dataIndex: 'username',
    title: '账号'
  },
  {
    dataIndex: 'name',
    title: '姓名'
  }
]
import difference from 'lodash/difference';
export default {
  mixins: [],
  components: {},
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  watch: {},
  computed: {},
  data() {
    return {
      mockData,
      targetKeys: originTargetKeys,
      disabled: false,
      showSearch: false,
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns
    }
  },
  created() {
  },
  methods: {
    onChange(nextTargetKeys) {
      this.targetKeys = nextTargetKeys
    },

    triggerDisable(disabled) {
      this.disabled = disabled
    },

    triggerShowSearch(showSearch) {
      this.showSearch = showSearch
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key)
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys)
          itemSelectAll(diffKeys, selected)
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys
      }
    }
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
  }
}
</script>
<style lang='less' scoped>
</style>
